<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《崩坏3》 - 登录</title>
    <link rel="shortcut icon" href="../icon/favicon.ico">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/jQuery.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="../js/login.js"></script>
</head>

<body>
    <div id="root">
        <div class="mhy-verify-container">
            <img src="../img/login-mihoyologo.png" alt="米哈游" class="mihoyo-logo">
            <div class="mhy-login mhy-container-content">
                <div class="login-tab flex">
                    <div class="tab-item active">
                        验证码登录
                    </div>
                    <div class="tab-item">
                        密码登录
                    </div>
                    <i class="tab-active-line transition" style="width: 50%; left: 0%;"></i>
                </div>
                <div class="form-box">
                    <form action="http://localhost:6766/api/login" method="post" class="phone-login form-tab active">
                        <div class="mhy-form-input input-item">
                            <!-- input-error -->
                            <div class="input-container">
                                <input type="text">
                                <!---->
                                <div class="input-label">
                                    手机号注册/登录
                                </div>
                                <div class="input-line"></div>
                            </div>
                            <!---->
                            <p class="error-text">
                                <i class="anticon mhy-icon icon-closecircle"></i>
                                手机号不能为空
                            </p>
                            <p class="error-text-ph">
                                <i class="anticon mhy-icon icon-closecircle"></i>
                                手机格式错误
                            </p>
                        </div>
                        <div class="mhy-form-input input-item">
                            <div class="input-container">
                                <input type="tel">
                                <div class="input-label">
                                    手机验证码
                                </div>
                                <div click-upload="" class="input-inner-btn">
                                    获取验证码
                                </div>
                                <div class="input-line"></div>
                            </div>
                            <!---->
                            <p class="error-text">
                                <i class="anticon mhy-icon icon-closecircle"></i>
                                验证码不能为空
                            </p>
                            <!---->
                        </div>
                        <div class="mhy-button login-btn is-block">
                            <div class="btn">登 录</div>
                        </div>
                    </form>
                    <form action="http://localhost:6766/api/login" class="pwd-login form-tab" method="post">
                        <div class="mhy-form-input input-item">
                            <div class="input-container">
                                <input type="text" name="username">
                                <!---->
                                <div class="input-label">
                                    手机号/邮箱
                                </div>
                                <div class="input-line"></div>
                            </div>
                            <!---->
                            <p class="error-text">
                                <i class="anticon mhy-icon icon-closecircle"></i>
                                内容不能为空
                            </p>
                            <!---->
                        </div>
                        <div class="mhy-form-input input-item">
                            <div class="input-container">
                                <input type="password" name="password">
                                <!---->
                                <div class="input-label">
                                    密码
                                </div>
                                <div class="input-line"></div>
                            </div>
                            <!---->
                            <p class="error-text">
                                <i class="anticon mhy-icon icon-closecircle"></i>
                                密码不能为空
                            </p>
                            <!---->
                            <div class="mhy-button login-btn is-block">
                                <div class="btn">登 录</div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="register-bar">
                    <span role="link" class="login-problems">遇到问题？</span>
                    <a href="./regist.html" class="to-register">立即注册</a>
                </div>
                <div class="login-tip">
                    <div class="mhy-checkbox">
                        <div class="box-container">
                            <i class="anticon mhy-icon icon-check"></i>
                        </div>
                    </div>
                    <span>已阅读并同意</span>
                    <a href="" class="">《米哈游用户协议》</a>
                    <a href="" class="">《米哈游隐私政策》</a>
                    <span>，未注册的手机号验证通过将自动注册。</span>
                </div>
            </div>
            <div class="mhy-toast">
                请先阅读并同意协议
            </div>
        </div>
</body>

</html>